<script setup>
import { addQuestion } from '../api';
import { ref } from "vue";

// 每个表单控件的响应式数据
const title = ref('花儿为什么这样红？');
const tags = ref('花儿,自然,颜色');
const qq = ref('12345678');
const wx = ref('123456');
const mobile = ref('12345678901');
const level = ref('次要');
const content = ref('为什么为什么这么这么红么为什么这么这么红么为什么这么这么红么为什么这么这么红么为什么这么这么红');
// 等级下拉菜单的项
const columns = [
  { text: '严重', value: '1' },
  { text: '主要', value: '2' },
  { text: '次要', value: '3' },
  { text: '不急', value: '4' }
];
// 弹出层功能
const showPicker = ref(false);
const onConfirm = ({ selectedOptions }) => {
  showPicker.value = false;
  level.value = selectedOptions[0].text;
};
// 提交表单
const submitFn = (values) => {
  // 处理数据
  let i=0;
  columns.some((val,idx)=>{
    i = idx;
    return val.text === values.level;
  })
  values.level = columns[i].value - 0;
  // 发送到后端
  addQuestion(values).then(res=>{
    console.log(res);
  })
};
</script>

<template>
  <van-form @submit="submitFn">
    <van-cell-group inset>
      <van-field
        v-model="title"
        name="title"
        label="标题"
        placeholder="请输入标题"
        :rules="[{ required: true, message: '请输入标题' }]"
      />
      <van-field
        v-model="tags"
        name="tags"
        label="标签"
        placeholder="请输入标签，使用逗号隔开"
        :rules="[{ required: true, message: '请输入标签' }]"
      />
      <van-field
        v-model="qq"
        name="qq"
        label="qq"
        placeholder="请输入qq"
      />
      <van-field
        v-model="wx"
        name="wx"
        label="微信号"
        placeholder="请输入微信号"
      />
      <van-field
        v-model="mobile"
        name="mobile"
        label="手机号"
        placeholder="请输入手机号"
      />
      <van-field
        v-model="level"
        name="level"
        is-link
        readonly
        label="等级"
        placeholder="选择等级"
        @click="showPicker = true"
      />
      <van-popup v-model:show="showPicker" round position="bottom">
        <van-picker
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>
      <van-field
        v-model="content"
        name="content"
        rows="4"
        autosize
        label="问题内容"
        type="textarea"
        maxlength="100"
        placeholder="请输入问题内容"
        show-word-limit
      />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>

</template>